<template>
  <div>
    <div className="info">
      <div id="container" style="width:70%;height: 400px"/>
      <p>在初始化地图时，如果 center 属性缺省，地图默认定位到用户所在城市的中心</p>
      <hr>
      <p>{{ centerInfo }}</p>
    </div>
  </div>
</template>

<script>

import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      centerInfo: '',
    };

  },
  mounted() {
    AMapLoader.load({
      key: 'd0a13e507309316024509a088bf8cfee',
      version: '2.0',
    }).then((AMap) => {
      AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认：true
          timeout: 10000, // 设置定位超时时间，默认：无穷大
          offset: [10, 20],  // 定位按钮的停靠位置的偏移量
          zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          position: 'RB' //  定位按钮的排放位置,  RB表示右下
        })

        geolocation.getCurrentPosition(function(status,result){
          if(status=='complete'){
            onComplete(result)
          }else{
            onError(result)
          }
        });

        function onComplete (data) {
          // data是具体的定位信息
          console.log("土体地点"+data)
        }

        function onError (data) {
          // 定位出错
        }
      })

      var map = new AMap.Map('container', {
        viewMode: "2D", // 是否为3D地图模式
        zoom: 13, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
        resizeEnable: true,
      });
      this.centerInfo = '当前中心点：' + map.getCenter();
    });
  },

};
</script>

<style scoped>
html,
body,
#container {
  height: 100%;
}

.info {
  width: 20rem;
}
</style>
